<template>
  <div class="lct-top">
    <ul class="cube-list">
      <li
        class="cube-item"
        v-for="(cube, index) in dataSet.leftCenterTop ? dataSet.leftCenterTop.lctTop.accessData : []"
        :key="index"
      >
        <cube :cubeData="cube" :ref="`cube${index}`"></cube>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cube from '@/components/common/cube.vue'
export default {
  components: {
    Cube
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState(['dataSet'])
  },
  watch: {},
  methods: {
    init() {
      let tl = new TimelineMax({})
      tl.addLabel('start')
      for (let i = 0; i < this.dataSet.leftCenterTop.lctTop.accessData.length;i++) {
        tl.add(this.$refs[`cube${i}`][0].init(), 'start+=' + i * 0.2)
      }
      return tl
    }
  }
}
</script>
<style lang='scss' scoped>
.lct-top {
  width: 100%;
  height: 190px;
  padding: 20px 0 0 26px;
  .cube-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, 44px);
    grid-auto-flow: column;
    grid-row-gap: 12px;
  }
}
</style>